<template>
	<div class="panel class-panel" :class="bg">
	    <div class="panel-heading">
	        <h1 class="panel-title text-ellipsis">
	            <a :title="classItem.cla_name+' - '+classItem.cou_name" 
	               	:href="'/Students/students.html?cad='+classItem.cla_id">
	               	<!-- {{classItem.cla_name+' - '+classItem.cou_name}} -->
	               	{{classItem.cla_name}}
	               	<span class="course-text">{{classItem.cou_name}}</span>
	            </a>
	            
	        </h1>
	        <div class="dropdown pull-right">
	            <a class="class-edit dropdown-toggle" href="javascript:;" data-toggle="dropdown"><span class="glyphicon glyphicon-menu-hamburger"></span></a>
	            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1" v-if="isTeacher">
	                <li><a class="menu-class-edit" data-toggle="modal" data-target="#edit-class-modal" @click='edit'>编辑</a></li>
	                <li><a href="javascript:;" class="menu-class-file" @click='file'>归档</a></li>
	                <li><a href="javascript:;" class="menu-class-delete" @click='del'>删除</a></li>
	            </ul>
	            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1" v-else>
	                <li><a href="javascript:;" class="menu-class-delete" @click='cancel'>退课</a></li>
	            </ul>
	        </div>
	        <p><small><span class="glyphicon glyphicon-time"></span> {{classItem.cla_start}} ~ {{classItem.cla_end}}</small></p>
	    </div>
	    <div class="panel-body">
	        <p class="text-muted">近期测试</p>
	        <p class="last-quiz" v-for="qus in classItem.quiz"><a :href="'/TestPaper/testPaper.html?qd='+qus.qus_id">{{qus.qus_name}}</a></p>
	        <a class="stu-num" :href="'/Students/students.html?cad='+classItem.cla_id">
	            <span class="glyphicon glyphicon-user"></span>学生{{classItem.cla_stu_num}}</a>
	    </div>
	</div>
</template>
	
<script>
	export default {
		created: function() {
			var type = ["default", "info", "primary", "danger", "success"];
			this.bg = 'panel-' + type[this.classItem.cla_id%5];
		},
		data () {
			return {
				bg: 'panel-default'
			}
		},
		props: ['classItem', 'index', 'isTeacher'],
		methods: {
			edit: function() {
				this.$dispatch('edit-class', this.index);
			},
			file: function() {
				this.$dispatch('file-class', this.index);
			},
			del: function() {
				this.$dispatch('del-class', this.index);
			},
			cancel: function() {
				this.$dispatch('cancel-class', this.index);
			}
		}
	}
</script>

<style>
	.class-panel {
		min-width: 240px;
		max-width: 400px;
	}

	.class-panel .panel-body {
		height: 180px;
		position:relative;
	}

	.class-panel .panel-heading {
		padding: 15px 15px 0;
	}

	.class-panel .stu-num {
		position:absolute;
		bottom:5px; 
		right:10px;
	}

	.class-panel .panel-title {
		display:inline-block;
		margin-bottom:20px;
		font-size:20px;
	}

	.class-panel .panel-title a:hover {
		text-decoration: none;
		opacity: .9;
	} 

	.class-panel .course-text {
		font-size: 15px;
		opacity: .9;
	}
	.class-edit {
		color: #000;
	}

	.panel-body a.stu-num {
		color: #818181;
	}

	.panel-body a.stu-num:hover {
		opacity: 0.6;
		text-decoration: none;
	}

	.panel-body a.stu-num:focus {
		text-decoration: none;
	}
	.last-quiz a {
		font-size: 13px;
		color: #000;
	}
	.last-quiz {
		margin-bottom: 5px;	
	}
	@media (max-width: 1365px) {
		.class-panel .panel-title {
			max-width: 180px;
		}
	}
	@media (min-width: 1366px) and (max-width: 1599px) {
		.class-panel .panel-title {
			max-width: 220px;
		}
	}
	@media (min-width: 1600px) and (max-width: 1919px){
		.class-panel .panel-title {
			max-width: 270px;
		}
	}
	@media (min-width: 1600px) {
		.class-panel .panel-title {
			max-width: 325px;
		}
	}
</style>